<template>
    <div class="container">
        <Head></Head>
        <div class="content">
           <MainNav></MainNav> 
           <div class="main">
               <Location title="科室管理" msg="已上传"></Location>
                <div class="tableInfo">
                    <div class="confirmBox">
                        <div class="searchBox">
                            <div class="demo-input-suffix">
                                <span>科室名称</span>
                                <el-input
                                    placeholder="请输入患者姓名"
                                    v-model="value2">
                                </el-input>
                            </div>
                            <div class="block">
                                <span class="demonstration">添加时间</span>
                                <el-date-picker
                                    type="date"
                                    v-model="value1"
                                    placeholder="选择日期">
                                </el-date-picker>
                            </div>
                             <el-form :inline="true" :model="formInline" class="demo-form-inline">
                                <el-form-item>
                                    <el-button type="primary">搜索</el-button>
                                </el-form-item>
                            </el-form>
                            <el-row >
                                <el-button icon="el-icon-plus" @click="addDepartment()">添加科室</el-button>
                            </el-row>
                        </div>
                    </div>
                    <el-table
                        :data="tableData"
                        style="width:100%"
                        size:medium 
                        >
                        <el-table-column
                        prop="date"
                        label="序号"
                      
                        >
                        </el-table-column>
                        <el-table-column
                        prop="name"
                        label="科室名称"
                       >
                        </el-table-column>
                        <el-table-column
                        prop="province"
                        label="科室位置"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="city"
                        label="科室位置图"
                        >
                        </el-table-column>
                        <el-table-column
                        prop="address"
                        label="添加时间"
                       >
                        </el-table-column>
                        <el-table-column
                        prop="zip"
                        label="状态"
                       >
                        </el-table-column>
                        <el-table-column
                            label="操作"
                          >
                            <template slot-scope="scope">
                                <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
                                <el-button type="text" size="small" class="delete" @click="deleted()">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <Pagination></Pagination>
                <Footer></Footer>
           </div>
        </div>
         <el-dialog
            :title="(ismodify?'添加科室':'修改科室')"
            :visible.sync="dialogVisible"
            width="30%"
            :show-close="false">
           <div class="demo-input-suffix">
               <img :src="star" alt="" v-if="ismodify">
                <span>科室名称</span> 
                <el-input
                    placeholder="请输入科室名称"
                    v-model="value2">
                </el-input>
            </div>
             <div class="demo-input-suffix">
                <img :src="star" alt="" v-if="ismodify">
                <span>科室位置</span> 
                <el-input
                    placeholder="请输入科室位置"
                    v-model="value2">
                </el-input>
            </div>
            <div class="demo-input-suffix">
                科室位置图
                <div class="add uploadMap" v-if="isupload">
                    <span>上传位置图</span>
                </div>
                <div class="modify uploadMap" v-else>
                     <span class="uploading">已上传</span><span>重新上传</span>
                </div>
               
            </div>
            <div class="demo-input-suffix">
                是否启用 
                <span class="enable"><img :src="unchecked" alt=""><em>是</em></span>
                <span class="enable"><img :src="checked" alt=""><em>否</em></span>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确认添加</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import Head from "@/components/head";
    import  MainNav from "@/components/mainNav";
    import  Footer from "@/components/footer";
    import  Location from "@/components/location";
    import  Pagination from "@/components/pagination";
    export default{
        name:"Offices",
        components: {
           Head,
           Location,
           MainNav,
           Pagination,
           Footer
        },
        data(){
            return{
                checked:require('@/assets/checked.png'),
                unchecked:require('@/assets/unchecked.png'),
                star:require('@/assets/star.png'),
                value1: '',
                value2: '',
                isupload:false,
                ismodify:false,
                formInline: {
                user: '',
                region: ''
                },
                 value1: new Date(2016, 9, 10, 18, 40),
                dialogVisible:false,
               tableData: [
                   {
                    date: '1',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1518 弄',
                     locationImg:require('@/assets/location.png'),
                    zip: 200333
                    }, {
                    date: '2',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1517 弄',
                     locationImg:require('@/assets/location.png'),
                    zip: 200333
                    }, {
                    date: '3',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1519 弄',
                    zip: 200333
                    }, {
                    date: '4',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1516 弄',
                    zip: 200333
                    },
                     {
                    date: '1',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1518 弄',
                    zip: 200333
                    }, {
                    date: '2',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1517 弄',
                    zip: 200333
                    }, {
                    date: '3',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1519 弄',
                    zip: 200333
                    }, {
                    date: '4',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1516 弄',
                    zip: 200333
                    },
                     {
                    date: '1',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1518 弄',
                    zip: 200333
                    }, {
                    date: '2',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1517 弄',
                    zip: 200333
                    }, {
                    date: '3',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1519 弄',
                    zip: 200333
                    }, {
                    date: '4',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1516 弄',
                    zip: 200333
                    },
                     {
                    date: '1',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1518 弄',
                    zip: 200333
                    }
                    ,
                     {
                    date: '2',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1517 弄',
                    zip: 200333
                    }, {
                    date: '3',
                    name: '王小虎',
                    province: '上海',
                    city: '待确认',
                    address: '上海市待确认金沙江路 1519 弄',
                    zip: 200333
                    }
                    ]
            }
        },
        methods:{
            addDepartment(){
                this.ismodify=true;
                this.dialogVisible=true;
            },
            handleClick(){
                this.ismodify=false;
                this.dialogVisible=true;
            },
            deleted(){
                 this.$confirm('删除科室，不会删除科室相关工作人员账户信息，科室人员所属科室会被重置，确定删除科室？', '删除科室', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                    });
                }

        }
    }
</script>
<style lang="stylus">
    .confirmBox{
        padding:0 !important;
        .searchBox{
            padding:11px 0;
        }
        .demo-input-suffix{
            margin-left:20px !important;
        }
        .el-form{
            margin-left:10px !important;
        }
        .el-row{
            display:flex;
            align-items:center;
            margin-left:15px;
            .el-button{
                width:100px;
                height:30px;
                padding:0;
                .el-icon-plus{
                    color:#66CC99 !important;
                }
            } 
           
        }
       
    }
    .delete{
        color:#FF7A64;
    }
    .el-icon-plus:before{
        color:#66CC99;
    }
    .demo-input-suffix{
        font-size:14px;
        font-weight:600;
        color:#000;
    }
    .el-table__body-wrapper .el-button:focus,.el-table__body-wrapper .el-button:hover{
        color:#fff;
    }
  .el-input{
    width:370px;
    height:30px;
    border-radius:5px;
    .el-input__inner{
        height:30px;
        border-color:#409EFF;
    }
  }
  .el-message-box__header{
    border-bottom:1px solid #3FBDFF;
    .el-message-box__title{
        font-size:14px;
        color:#FF7A64;
    }
  }
  .el-message-box__message{
      P{
          font-size:14px;
          color:#000;
          font-weight:400;
      }
  }
  .el-message-box__btns{
      text-align:center;
      .el-button{
          width:150px;
          height:30px;
      }
  }
  .el-dialog__wrapper{
      .demo-input-suffix{
        margin-bottom:10px;
        line-height:40px;
         >img{
            width:10px;
            height:10px;
            vertical-align:middle;
        }
        >span{
            vertical-align:middle;  
        }
         .uploadMap{
            display:inline-block;
            color:#007AFF;
            font-weight:400;
            margin-left:15px;
            .uploading{
                color:#000;
                margin-right:15px;
            }
        }
        .enable{
            display:inline-block;
            margin-left:30px;
            img{
                display:inline-block;
                width:15px;
                height:15px;
                margin-right:10px;
                vertical-align:middle;
            }
            em{
                font-style:normal;
                vertical-align:middle;
            }
        }
      }
          
  }
</style>